<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function $(id){
				return document.getElementById(id);
			}

			function setItem(){
				let key = $('key').value;
				let value = $('value').value;

				localStorage.setItem(key, value);
				refreshDiv();
			}

			function getItem(){
				let key = $('key').value;

				alert(localStorage.getItem(key));
			}

			function removeItem(){
				let key = $('key').value;
				localStorage.removeItem(key);
				refreshDiv();
			}

			function doclear(){
				localStorage.clear();
				refreshDiv();
			}

			function getKey(){
				alert(`the 1st key is : ${localStorage.key(0)}`);
			}

			function getLength(){
				alert(`the Length is : ${localStorage.length}`);
			}

			function getRemainSpace(){
				alert(`the remain space is: ${localStorage.remainingSpace}`);
			}

			function refreshDiv(){
				let res = ['localStorage.length: ' + localStorage.length];
				for(let i = localStorage.length; i--;){
					var key = localStorage.key(i);
					res.push(`${key}: ${localStorage.getItem(key)}`);
				}

				$('showDiv').innerHTML = res.join('<br/>');
			}

			window.onload = function(){
				refreshDiv();
				alert(localStorage.aa);
			}
		</script>
	</head>
	<body>
		<label>Key:<input id="key" type="text"></label>&nbsp;&nbsp;&nbsp;&nbsp;
		<label>Value:<input id="value" type="text"></label><br />
		<button onclick="setItem()">setItem</button>&nbsp;
		<button onclick="getItem()">getItem</button>&nbsp;
		<button onclick="removeItem()">removeItem</button>&nbsp;
		<button onclick="doclear()">clear</button>&nbsp;
		<button onclick="getKey()">key(0)</button>&nbsp;
		<button onclick="getLength()">length</button>&nbsp;
		<button onclick="getRemainSpace()">remainSpace</button>&nbsp;
		<div id="showDiv"></div>
	<div><script language="javascript">

	</script></div></body>
</html>
